<template>
    <div class="up">
        <div class="left">
            <el-form ref="formRef" :model="form" inline label-width="0">
                <el-form-item prop="typeId">
                    <el-select v-model="form.typeId" placeholder="请输入物资类型" style="width: 150px">
                        <el-option v-for="item in option" :key="item.typeId" :label="`${item.typeName}`"
                                   :value="item.typeId"/>
                    </el-select>
                </el-form-item>
                <el-button :icon="Search" plain type="primary" @click="searchVol"/>
                <el-button :icon="Refresh" plain type="info" @click="reFresh(formRef)"/>
            </el-form>
        </div>
        <div class="center" style="flex:1;"/>
        <div class="right">
            <AddGoods/>
        </div>
    </div>
</template>

<script lang='ts' setup>

import { onBeforeMount, onUnmounted, ref } from 'vue'
import { Refresh, Search } from '@element-plus/icons-vue'
import { FormInstance } from 'element-plus'
import AddGoods from '@/components/Goods/addGoods.vue'
import { Type } from '@/ts/type/Goods'
import GoodsService from '@/api/goodsApi'
import { Message } from '@/plugins/element'
import { EventBus } from '@/utils/mitt'

const form = ref<Type>({})
const formRef = ref<FormInstance>()
const option = ref<Type[]>([])
const getOptions = () => {
  GoodsService.getOptions().then(res => {
    const { data } = res
    option.value = data
  })
}
const searchVol = () => {
  if (form.value.typeId === undefined) return Message.error('请检查输入内容')
  EventBus.emit('searchTypeForm', form.value)
  EventBus.emit('searchType', true)
}

const reFresh = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  EventBus.emit('searchType', false)
}
onBeforeMount(() => {
  getOptions()
})
// 销毁当前页面的事件总线
onUnmounted(() => {
  EventBus.off('searchType')
  EventBus.off('searchTypeForm')
})
</script>

<style lang='scss' scoped>
.up {
  display: flex;
  justify-content: space-evenly;
}

:deep(.left .el-form-item) {
  margin-bottom: 0;
}
</style>